<template>
  <div class="tws-login-page">
   <top></top>
    <div class="tws-login-box">
      <div class="tws-n-left">
         <el-image :src="img"  fit="scale-down"></el-image>
      </div>
      <div class="tws-n-right">
        <h3 class="tws-n-title">用户登录</h3>
        <!-- <p class="tws-n-subtitle"></p> -->
        <el-form ref="dataForm" :model="form" :rules="rules" class="tws-n-form" autocomplete="off" label-position="left" label-width="0">
          <div class="tws-n-input-box">
            <el-form-item  prop="mobile">
            	<el-input ref="mobile" size="large" prefix-icon="el-icon-user" v-model="form.mobile" placeholder="请输入手机号码" />
            </el-form-item>
          </div>
          <div class="tws-n-input-box">
            <el-form-item  prop="password">
            	<el-input ref="password" size="large" show-password prefix-icon="el-icon-lock" v-model="form.password" placeholder="请输入登录密码" />
            </el-form-item>
          </div>
          <el-button class="tws-n-button" :loading="loading" type="primary" @click.native.prevent="createData" @keyup.enter.native="createData">登录</el-button>
        </el-form>
        <!-- <div class="tws-n-a-box">
          <router-link to="/forget">忘记密码</router-link>
        </div> -->
      </div>
    </div>

	  <bottom></bottom>
  </div>
</template>

<script>
import top from './components/top'
import bottom from './components/bottom'

export default {
  components: { top, bottom },
  data() {
    return {
	  img:require('./logo.png'),
      redirect: '',
      otherQuery: [],
      loading: false,
      advList: [],
      //数据
      form: {
        mobile: '',
        password: '',
      },
      //验证规则
      rules: {
        mobile: [{ required: true, message: '请输入手机号码！', trigger: 'blur'}],
        password: [{ required: true, message: '请输入登录密码！', trigger: 'blur'}]
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {

  },
  mounted() {
    if (this.form.mobile === '') {
      this.$refs.mobile.focus()
    }
  },
  created() {
  	//获取数据列表
  	this.getAdvInfo()
  },
  methods: {
    //获取广告列表
    getAdvInfo() {
      this.$api.fetchListAdvIdent({ident:100}).then(response => {
        if(response.info.adv_list.length){
          this.advList = response.info.adv_list
        }
      })
    },
    //提交
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.form).then(response => {
            this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>
